<template>
  <div class="filtersWrapper">
    <el-checkbox-group v-model="checkedDepartment" class="filter" @change="filterChange">
      <el-checkbox
        v-for="dept in depts"
        :key="dept.id"
        :label="dept.name"
      />
    </el-checkbox-group>

    <el-checkbox-group v-model="checkedStatu" class="filter" @change="filterChange">
      <el-checkbox
        v-for="statu in AttendanceEnum.holidayType"
        :key="statu.id"
        :label="statu.id"
      >
        {{ statu.value }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
import { getDepartments } from '@/api/department'
import AttendanceEnum from '@/api/constant/attendance'
export default {
  props: {
    bigList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      // 被选中的部门选项
      checkedDepartment: [],
      // 全部部门列表
      depts: [],
      // 考勤状态枚举
      AttendanceEnum,
      // 被选中的状态
      checkedStatu: []
    }
  },
  async created() {
    const { depts } = await getDepartments()
    this.depts = depts
    console.log(this.depts)
  },
  methods: {
    filterChange() {
      let res
      if (this.checkedDepartment.length === 0) {
        res = this.bigList
      } else {
        res = this.bigList.filter(user => {
          const department = user.departmentName
          return this.checkedDepartment.includes(department)
        })
      }

      console.log(res)

      // 上面是部门过滤,
      // 下面是工作状态过滤
      // 无论哪个发生改变, 两个过滤器其实都应该放在一起考虑
      res = res.map(user => {
        return {
          ...user,
          attendanceRecord: this.convertRecord(user.attendanceRecord)
        }
      })

      this.$emit('filterChange', res)
    },
    convertRecord(oldRecord) {
      // 这里是每个员工的考勤记录数组处理办法
      // 这里 oldRecord 有 31 天数据
      // 应该进行遍历, 每天的数据如果状态码存在于选中范围内, 就显示
      // 不然就空白

      const res = oldRecord.map(item => {
        // 选择框当中是否有选中
        const 选择框为空 = this.checkedStatu.length === 0
        const 数据在选择框中 = this.checkedStatu.includes(item.adtStatu.toString())

        return {
          ...item,
          // 如果没有选中任何值 || 如果当前记录值在选中数组中
          // 返回源数据
          // 否则返回 0
          adtStatu: 选择框为空 || 数据在选择框中 ? item.adtStatu : 0
        }
      })

      console.log(this.checkedStatu)
      console.log(res)

      return res
    }
  }
}
</script>

<style lang="scss" scoped>
.filtersWrapper {
  margin-bottom: 40px;
  .filter {
    margin: 20px 0;
  }
}
</style>
